<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;

      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        color: coral;
      }
      #content {
        width: 1024px;
        height: 800px;
        margin: auto;
      }

      .box {
        background: url(images/h_bg.jpg) no-repeat;
        width: 1024px;
        height: 150px;
        margin: auto;
      }

      #title {
        width: 975px;
        height: 40px;
        /* border: 1px solid #000; */
        margin: auto;
      }

      #title ul {
        float: right;
        line-height: 40px;
        font-size: 14px;
      }

      #title ul li {
        float: left;
        padding-right: 8px;
        list-style: none;
      }

      #title ul li i {
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        background: url(images/icon.gif) no-repeat;
        background-position: 0px 0px;
      }

      #title ul li:nth-child(2) i {
        background-position: -40px 0px;
      }

      #title ul li:nth-child(3) i {
        background-position: -80px 0px;
      }

      #title ul li:nth-child(4) i {
        background-position: -120px 0px;
      }

      #btn_sub {
        border: 1px solid #000;
        border-radius: 15px;
        width: 50px;
      }
      .menu ul {
        width: 975px;
        height: 33px;
        /* border: 1px solid #000; */
        line-height: 33px;
        margin: 55px auto;
      }

      .menu ul li {
        float: left;
        list-style: none;
        padding-left: 23px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div id="title">
        <ul>
          <li>
            <a href="buy.html" target="_parent"><i></i>购物车</a>
          </li>
          <li>
            <a href="help.html" target="_parent"><i></i>帮助中心</a>
          </li>
          <li>
            <a href="cartlist.html" target="_parent"><i></i>加入收藏</a>
          </li>
          <li>
            <a href="index.html" target="_parent"><i></i>设为首页</a>
          </li>
          <li>
            <a href="Login.html" id="btn_sub" target="_parent">登录</a>
          </li>
          <li>
            <a href="Register.html" id="btn_sub" target="_parent">注册</a>
          </li>
        </ul>
      </div>
      <div class="menu">
        <ul>
          <li>
            <a href="index.html" target="_parent">首页</a>
          </li>
          <li>
            <a href="index.html" target="_parent">&nbsp;&nbsp;家用电器</a>
          </li>
          <li><a href="index.html" target="_parent">手机数码</a></li>
          <li><a href="index.html" target="_parent">日用百货</a></li>
          <li><a href="index.html" target="_parent">&nbsp;书籍</a></li>
          <li>
            <a href="index.html" target="_parent"
              >&nbsp;&nbsp;&nbsp;帮助中心
            </a>
          </li>
          <li><a href="index.html" target="_parent">免费开店</a></li>
          <li><a href="index.html" target="_parent">全球咨询</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
